<template>
  <div class="manual_detail">
    <header>
      <BaseNavBar title="手册详情" :is-nav="true" />
    </header>
    <main style="margin-top: 8px;">
      <Card>
        <section class="manual">
            <img class="manual_img" :src="`/api${manual?.cover}`" v-if="manual?.cover"/>
            <section class="manual_title">{{ manual?.title }}</section>
            <section class="manual_brief">{{ manual?.brief }}</section>
            <section class="manual_condition">光照：{{ manual?.light }}</section>
            <section class="manual_condition">浇水：{{ manual?.watering }}</section>
            <section class="manual_condition">土壤：{{ manual?.soil }}</section>
            <section class="manual_condition">施肥：{{ manual?.fertilizer }}</section>
            <section class="manual_condition">温度：{{ manual?.temperature }}</section>
            <section class="manual_condition">湿度：{{ manual?.humidity }}</section>
            <section class="manual_condition">生长空间：{{ manual?.space }}</section>
            <section class="manual_condition">生长周期：{{ manual?.growthCycle }}</section>
            <section class="manual_time">创建时间：{{ manual?.createTime}}</section>
            <section class="manual_time">更新时间：{{ manual?.updateTime }}</section>
        </section>
      </Card>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { showToast } from 'vant';
import Card from '@/components/Card/index.vue';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import {getManualDetail} from '@/apis/manual';

const route = useRoute();
const manual = ref({});

const init = async () => {
  const { data = {}, msg, code } = await getManualDetail(route.params?.id);
  if (code === 200) {
    console.log(data,'data');

    manual.value = data;
    return;
  }
  showToast(msg);
};

onMounted(() => {
  init();
})
</script>

<style lang="less" scoped>
.manual{
  box-sizing: border-box;
  padding: 8px;
  &_img{
    width: 100%;
    height: 320px;
  }
  &_title{
    font-size: 16px;
    color: #000;
  }
  &_brief{
    font-size: 12px;
    color: #999;
  }
  &_condition{
    font-size: 14px;
    color: #666;
  }
  &_time{
    font-size: 12px;
    color: #999;
  }
}
</style>
